<template>
	<view>
		<view>
			<div
				:class="{ readonly: isReadonly(item) }"
				v-for="item in forms.filter(
					(f) =>
						!isReadonly(f) ||
						(isReadonly(f) && _value[f.id] != undefined)
				)"
				:key="item.name"
				class="backf pr10"
			>
				<view
					v-if="
						item.name !== 'SpanLayout' &&
						item.name !== 'Description' &&
						item.name !== 'TableList' &&
						item.name !== 'ImageUpload' &&
						item.name !== 'SignPanel'
					"
					:name="item.id"
				>
					<view class="df all">
						<view class="title">{{ item.title }}:</view>
						<form-design-render
							style="
								color: #9a9a9a;
								word-break: break-all;
								flex: 1;
							"
							:readonly="isReadonly(item)"
							:ref="item.id"
							:value="_value[item.id]"
							:config="item"
							:placeholder="item.props.placeholder"
							:options="item.props.options"
							:expanding="item.props.expanding"
							@inputVal="getValue($event)"
							@setSingure="setSingure($event)"
						/>
					</view>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
import FormDesignRender from '@/subPackagesIndex/components/approve-item/FormDesignRender/FormDesignRender.vue'
export default {
	components: { FormDesignRender },
	props: {
		forms: {
			type: Array,
			default: () => {
				return []
			},
		},
		value: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},
	data() {
		return {}
	},
	computed: {
		_value: {
			get() {
				return this.value
			},
		},
	},
	methods: {
		isBlank(val) {
			return (
				!this.$isNotEmpty(val) ||
				(val instanceof String && val.trim() === '') ||
				(Array.isArray(val) && val.length === 0)
			)
		},
		isReadonly(item) {
			return item.perm === 'R'
		},
	},
}
</script>
<style scoped lang="scss">
.title {
	padding-bottom: 0rpx !important;
	color: #9a9a9a !important;
	font-size: 28rpx !important;
}
</style>
